import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker, Swiper, SwiperItem } from '@tarojs/components'
import {AtList,AtListItem,AtGrid,AtActionSheet, AtActionSheetItem} from 'taro-ui'
import { $navigateTo, getGlobalData,$redirectTo } from '../../../../global';
import './huati.scss'
import reactMixin from 'react-mixin';
import myJs from './huatiJs.js'
import app from '../../../../main.js'
export default class Huati extends Component {
    config = {
        navigationBarTitleText: '话题详情'
    }
    constructor () { 
        super(...arguments); 
        this.state = this.getData(); 
    }
    init () {
        this.getTopic();
    }
    onReachBottom() {
        // 分页逻辑,下拉到底部触发时间
        if (this.state.total > this.state.dongtaiss.offset) {
            this.state.dongtaiss.offset += this.state.dongtaiss.length;
            this.listDongtais();
        }
    }
    selectedType()  {
        var isOpen = true;
        this.setState({
            isOpen: isOpen
        });
    }
  
    publish(type) {
        var id = this.state.topic.id;
        var url = '../fabudongtai/fabudongtai?type='+type+'&topic_id='+id;
        var isOpen = this.state.isOpen;
        isOpen = false;
        this.setState({
            isOpen: isOpen
        });
        app.navigateTo(url);
    }

    chooseVideo(type) {
        var that = this;
        var isOpen = that.state.isOpen;
      
        wx.chooseVideo({
            sourceType: ['album','camera'],
            maxDuration: 60,
            camera: 'back',
            success(res) {
                that.uploadVideo(res, type);
            }
        })
        
        isOpen = false;
        that.setState({
            isOpen: isOpen
        });
    }

    //视频上传 返回临路径
    chooseVideo(type) {
        var that = this;
        var isOpen = that.state.isOpen;
        wx.chooseVideo({
            sourceType: ['album', 'camera'],
            maxDuration: 60,
            camera: 'back',
            success(res) {
                var tmp = res.tempFilePath;//临时视频路径
                app.navigateTo('../fabudongtai/fabudongtai?type=' + type + '&video=' + tmp + '&topic_id=' + that.state.topic.id);
            }
        })

        isOpen = false;
        that.setState({
            isOpen: isOpen
        });
    }
    go(url){
        $navigateTo(url);
    }
    clickFavour(chat_id,index,item,num) {
        if (num == 0) {
            var me = this;
            var dongtaiss = me.state.dongtaiss;
            app.post("web/dynamic_topic/likeDynamic", {chat_id: chat_id}, function(res) {
                var like = res.data.result;
                if(dongtaiss.items[index].id = chat_id){
                       if (like.is_like == '已点赞') {
                            dongtaiss.items[index].likeNum += 1;
                            dongtaiss.items[index].is_like = '已点赞'
                        }else {
                            dongtaiss.items[index].likeNum -= 1;
                            dongtaiss.items[index].is_like = '未点赞'
                        }
                }
                me.setState({
                    dongtaiss: dongtaiss
                }) 
            }); 
        }
        if (num == 1) {
            var me = this;
            var dongtaiss = me.state.dongtaiss;
            app.post("web/dynamic_topic/collectDynamic", {chat_id: chat_id}, function(res) {
                var collect = res.data.result;
                if(dongtaiss.items[index].id = chat_id){
                       if (collect.is_collect == '已收藏') {
                            dongtaiss.items[index].collectNum += 1;
                            dongtaiss.items[index].is_collect = '已收藏'
                        }else {
                            dongtaiss.items[index].collectNum -= 1;
                            dongtaiss.items[index].is_collect = '未收藏'
                        }
                }
                me.setState({
                    dongtaiss: dongtaiss
                })
            });
        }
        if (num == 2) {
            $navigateTo('../dongtaixiangqing/dongtaixiangqing?chat_id='+chat_id);
        }
    }
    
    showImg (img) {
        console.log(1,img)
        app.prviewImage(img,[img])
    }

    forbid = (e) => {
        e.stopPropagation();
    }

    render () {
        let dianzan = app.imageUri + 'img/icon-dianzan.png'
        let nodianzan = app.imageUri + 'img/icon-dianzan-kong.png'
        let shoucan = app.imageUri + 'img/icon-shoucan-man.png'
        let noshoucan = app.imageUri + 'img/icon-shoucan-kong.png'
        return (
            <View className='huati'>
                <View className=' class_0'>
                    <View className='at-article '>
                        <View className='at-article__h1 '>{this.state.topic.title}</View>
                        <View className='at-article__info '>{this.state.topic.created_at} 这是作者</View>
                        <View className='at-article__p '>{this.state.topic.summary}</View>
                        <Image mode='widthFix'className=' class_1' src={items} onClick={this.showImg.bind(this,this.state.topic.image)} src={this.state.topic.image}></Image>  
                    </View>
                </View>
                <View>
            {this.state.dongtaiss.items.map((item,index) =>
            <View className=' class_2'>
            <AtList>
                <AtListItem hasBorder={false} title={item.name} note={item.hospital} extraText={item.created_at} thumb={item.head_image} onClick={this.go.bind(this,'../doctorhomepage/doctorhomepage?doctor_id='+item.member_id)}></AtListItem>
            </AtList>
            <View className=' class_3'>
                <View className='at-article ' onClick={this.go.bind(this,'../dongtaixiangqing/dongtaixiangqing?chat_id='+item.id)}>
                    <View className='at-article__p class_4'>{item.content}</View>
                </View>
                {/* {
                    // return (
                        item.media_type == '图片'?
                         item.images.map((items, index) =>{
                            <View className=' class_5' onClick={this.go.bind(this,'../dongtaixiangqing/dongtaixiangqing?chat_id='+item.id)}>
                                <Image className=' class_6' src={items} onClick={this.showImg.bind(this,items)}></Image>  
                             </View>
                        }
                            : item.media_type == '视频'?
                            <Video controls={true} initial-time='0.01' src={items}></Video>
                            : ''
                        // )
                } */}

                {item.media_type == '图片' ?
                <View className=' class_5' onClick={this.go.bind(this, '../dongtaixiangqing/dongtaixiangqing?chat_id=' + items.id)}>
                    {
                        item.images.map((items, index) => {
                            return (
                                <Image key={index} mode className='class_6' src={items}></Image>
                            );
                        })
                    }
                </View>
                : item.media_type == '视频' ?
                    <View className='class_5'>
                        {
                            item.images.map((items, index) => {
                                return (
                                    <Video controls={true} initial-time='0.01' src={items}></Video>
                                );
                            })
                        }
                    </View>
                    : <View></View>
                }
            </View>
            <AtGrid className='fun-box'  onClick={this.clickFavour.bind(this,item.id,index)} mode='rect' hasBorder={false} columnNum={4} data={[
                { image:item.is_like == '已点赞' ? dianzan : nodianzan, value:item.likeNum},
                { image:item.is_collect == '已收藏' ? shoucan : noshoucan, value:item.collectNum},
                { image:app.imageUri+'img/icon-comment-kong.png',value:item.commentNum},
                { image:app.imageUri+'img/icon-zhuangfa.png',value:item.transpondNum}]}>
            </AtGrid>
            </View>
          )}
                </View>
                <AtActionSheet isOpened={this.state.isOpen} cancelText='取消'>
                        <AtActionSheetItem onClick={this.publish.bind(this, '图片')}>
                            选择图片
                        </AtActionSheetItem>
                        <AtActionSheetItem onClick={this.chooseVideo.bind(this, '视频')}>
                            选择视频
                        </AtActionSheetItem>
                </AtActionSheet>

                <Image className='add-img' onClick={this.selectedType.bind(this)} src={app.imageUri+'img/tianjiabingli.png'}></Image>
            </View>
        );
    }
}
reactMixin.onClass(Huati,myJs);